import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
Dialog.propTypes = {
    title: PropTypes.string,
    onOk: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    visible: PropTypes.bool,
    okText: PropTypes.string,
    cancelText: PropTypes.string
};
export default function Dialog(props) {
    const [cancelText, setCancelText] = useState('');
    useEffect(() => {
        setCancelText(props.cancelText);
    }, [props.cancelText]);
    return (
        <div hidden={!props.visible} className="js_dialog">
            <div className="weui-mask" />
            <div className="weui-dialog">
                <div className="weui-dialog__hd"><strong className="weui-dialog__title">{props.title}</strong></div>
                <div className="weui-dialog__bd">{props.children}</div>
                <div className="weui-dialog__ft">
                    <a className="weui-dialog__btn weui-dialog__btn_default" onClick={() => props.onCancel()}>{cancelText || '取消'}</a>
                    <a className="weui-dialog__btn weui-dialog__btn_primary" onClick={() => props.onOk()}>{props.okText || '确定'}</a>
                </div>
            </div>
        </div>
    )
}
